<template>
	<MainPage :main_spac1="false" :padding10="false">
		<template v-slot:HeaderLeft>
			<el-form
				:inline="true"
				:model="form"
				class="demo-form-inline"
				ref="userListFrom"
				label-width="60px"
			>
				<el-form-item label="日期" prop="time">
					<el-date-picker
						v-model="time"
						type="daterange"
						align="right"
						unlink-panels
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						:picker-options="pickerOptions"
						class="time240"
					>
					</el-date-picker>
				</el-form-item>

				<el-form-item>
					<el-button class="reset marginLeft10" @click="reset" type="primary"
						>重置</el-button
					>
					<el-button
						type="primary"
						@click="getArticleList"
						:loading="listLoading"
						>搜索</el-button
					>
				</el-form-item>
			</el-form>
		</template>
		<template v-slot:HeaderRight
			><el-button @click="handleExport">导出</el-button></template
		>
		<template v-slot:Table>
			<el-table
				ref="multipleTable"
				v-loading="listLoading"
				:data="list"
				element-loading-text="加载中"
				fit
				border
				highlight-current-row
				@selection-change="handleSelectionChange"
				style="min-height: 200px"
			>
				<el-table-column type="selection" />

				<el-table-column
					label="商品名称"
					prop="goods_name"
					:show-overflow-tooltip="true"
				/>
				<el-table-column label="图片" class-name="main_hei">
					<template slot-scope="scope">
						<div class="demo-image__error mainor_im">
							<el-image
								fit="fill"
								:src="scope.row.pic"
								:preview-src-list="scope.row.pics"
							>
								<div slot="error" class="image-slot">
									<img :src="puzzleImg" />
								</div>
							</el-image>
						</div>
					</template>
				</el-table-column>
				<el-table-column
					label="单位"
					prop="unit"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					label="分类"
					prop="category_name"
					:show-overflow-tooltip="true"
				>
					<template slot-scope="scope">{{ scope.row.category_name }}</template>
				</el-table-column>

				<el-table-column
					label="下单次数"
					prop="count"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					label="售卖状态"
					prop="goods_code"
					:show-overflow-tooltip="true"
				>
					<template slot-scope="scope">
						<span
							:style="{ color: scope.row.status == 1 ? '#03a98e' : 'red' }"
							>{{ status_new_list[scope.row.status] }}</span
						>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<template v-slot:Page>
			<!-- <el-pagination
        :current-page="current.page"
        :page-sizes="[20, 30, 50, 100]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        background
        @size-change="changeLimit"
        @current-change="changePage"
      /> -->
		</template>
	</MainPage>
</template>
<script>
	import MainPage from "@/components/MainPage";
	import { puzzleImg } from "@/api/currency";
	import { commonly_goods, export_common_goods } from "@/api/user/user";
	import { parseTime, exportMethod } from "@/utils/index.js";
	import { mapGetters } from "vuex";
	export default {
		name: "",
		components: {
			MainPage,
		},
		props: {
			id: {
				type: String | Number,
			},
		},
		computed: {
			...mapGetters(["avatar"]),
		},
		data() {
			return {
				listLoading: false,
				puzzleImg,
				parseTime,
				exportMethod,
				time: [],
				form: {
					start_time: "",
					end_time: "",
					id: "",
				},
				// 分页
				current: {
					page: 1,
					per_page: 20,
				},
				limit: 20,
				totalCount: 1,
				list: [],
				status_list: [],
				status_new_list: ["已关闭", "正在售卖"],
				selectArr: [],
				categoryList: [],
				pickerOptions: {
					shortcuts: [
						{
							text: "最近一周",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
								picker.$emit("pick", [start, end]);
							},
						},
						{
							text: "最近一个月",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
								picker.$emit("pick", [start, end]);
							},
						},
						{
							text: "最近三个月",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
								picker.$emit("pick", [start, end]);
							},
						},
					],
				},
			};
		},
		created() {
			this.setWeekDay();
			this.form.id = this.id;
			this.commonly_goods();
		},
		methods: {
			handleSelectionChange(val) {
				this.selectArr = [];
				let arr = [];
				val.map((e) => {
					arr.push(e.id);
				});
				this.selectArr = arr;
			},
			getArticleList() {
				this.current.page = 1;
				this.commonly_goods();
			},
			reset() {
				this.setWeekDay();
				this.getArticleList();
			},
			// 分页
			changeLimit(pageSize) {
				this.current.per_page = pageSize;
			},
			changePage(page) {
				this.current.page = page;
			},
			// 常用商品列表
			commonly_goods() {
				this.form.start_time = this.time ? this.time[0] : "";
				this.form.end_time = this.time ? this.time[1] : "";
				let data = Object(this.form);
				this.listLoading = true;
				commonly_goods(data).then((res) => {
					if (res.errcode == 0) {
						this.status_list = res.data.status_list;
						this.categoryList = res.data.categoryList;
						res.data.list.map((e) => {
							e.pic = this.avatar.domain + "/" + e.img;
							e.pics = [e.pic];
							e.category_name = this.getCategoryName(e.pid, e.cid);
						});
						this.list = res.data.list;

						this.listLoading = false;
					} else {
						this.$message.error(res.errmsg);
					}
				});
			},
			// 导出
			handleExport() {
				let message = "";
				let ids = "";
				if (this.selectArr.length > 0) {
					ids = this.selectArr.join(",");
					message = `您选择了【${this.selectArr.length}】个常用商品，是否继续？`;
				} else {
					let arr = [];
					this.list.map((e) => {
						arr.push(e.id);
					});
					ids = arr.join(",");
					message = `您尚未选择常用商品，则默认按条件导出全部，是否继续？`;
				}
				this.$confirm(message, "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				})
					.then(() => {
						let data = { uid: this.id, ids: ids };
						export_common_goods(data).then((res) => {
							this.exportMethod(res, "常用商品");
						});
					})
					.catch(() => {});
			},
			// 设置最近一周的日期
			setWeekDay() {
				const end = new Date();
				const start = new Date();
				start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
				this.time = [
					this.parseTime(start, "{y}-{m}-{d}"),
					this.parseTime(end, "{y}-{m}-{d}"),
				];
			},
			// 获取用户标题
			getCategoryName(pid, cid) {
				let categoryList = this.categoryList;
				let category_name = [];
				let second = [];
				let first = categoryList.find((e) => {
					return e.id == pid;
				});
				first ? category_name.push(first.title) : "";
				if (first) {
					second = first.selfNext.find((e) => {
						return e.id == cid;
					});
				}

				second ? category_name.push(second.title) : "";
				return category_name.join(" | ");
			},
		},
	};
</script>
<style lang='scss' scoped>
</style>
